<!--
 * @Autor: GXL
 * @Date: 2022-04-09 20:16:12
 * @LastEditTime: 2022-04-09 21:44:57
 * @FilePath: \blog_web\src\views\video\video.vue
 * @Description: I see that all living beings have no intention, but I moved my heart to you
-->
<template>
  <div class="video-page">
    <!-- 发布视频 -->
    <el-button type="success" class="release-btn" @click="releaseVideo"
      >发布视频</el-button
    >
    <!-- 视频 列表-->
    <div class="video-container">
      <div v-for="item in effectVideoList" :key="item.id" class="item">
        <video controls class="video">
          <source :src="item.video_url" />
          您的浏览器不支持 HTML5 video 标签。
        </video>
        <!-- 视频的标题 -->
        <p class="video-title">{{ item.video_title }}</p>
      </div>
    </div>
    <!-- 发布视频的组件 -->
    <release-video :releaseDialogVisible.sync="releaseDialogVisible" />
  </div>
</template>

<script>
// 导入接口
import { getEffectVideoList } from '@/api/video.js'
// 导入组件
import ReleaseVideo from './components/releaseVideo.vue'
export default {
  name: 'video',
  data() {
    return {
      releaseDialogVisible: false,
      effectVideoList: []
    }
  },
  components: {
    ReleaseVideo
  },
  created() {
    this.getEffectVideoList()
  },
  methods: {
    // 获取已经审核通过的视频
    getEffectVideoList() {
      getEffectVideoList().then((res) => {
        this.effectVideoList = res.result
      })
    },
    // 发布视频
    releaseVideo() {
      this.releaseDialogVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.video-page {
  .release-btn {
    margin-bottom: 20px;
  }
  .video-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      margin-bottom: 20px;
      .video {
        width: 300px;
        height: 180px;
      }
      .video-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
